<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>会员信息</title>
<link rel="stylesheet" href="assets/plugins/mobiscroll/css/mobiscroll.custom-2.16.1.min.css">
<script type="text/javascript" src="assets/plugins/mobiscroll/js/mobiscroll.custom-2.16.1.min.js"></script>
<script src="assets/plugins/jquery.ajaxfileupload.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> </script>
<script type="text/javascript">
var wxConfigSuccess = true;
wx.config({
    debug: false,
    appId: '${appid}',
    timestamp: ${sign.timestamp},
    nonceStr: '${sign.noncestr}',
    signature: '${sign.signature}',
    jsApiList: [
      'chooseImage',
      'uploadImage'
    ]
});
wx.ready(function () {
	  // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
	   wx.checkJsApi({
	      jsApiList: [
	        'chooseImage','uploadImage'
	      ],
	      success: function (res) {
	    	 
	      },
	   });
});

wx.error(function (res) {
	  wxConfigSuccess = false;
	});

$(".upImage").on("click",function(){
	var $img = $(this);
	var localId;
	wx.chooseImage({
	    count: 1, // 默认9
	    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
	    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
	    success: function (res) {
	        localId = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
	        $img.attr("src", localId);
	        
	        wx.uploadImage({
	    	    localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
	    	    isShowProgressTips: 1, // 默认为1，显示进度提示
	    	    success: function (res) {
	    	        $img.next().val(res.serverId);// 返回图片的服务器端ID
	    	    }
	    	});
	    }
	});
});

/*$(".upImage").AjaxFileUpload({
	action: "${ctx}/management/file",
	onComplete: function(filename, data) {
		var $file = $(this);
		if (data.success == true) {
			var url = data.msg;
			$file.prev().prev().attr("src", url);
			$file.prev().val(url);
		} else {
			Comm.msg(data.msg);
		}
	},
	onSubmit: function(filename) {
		//check suffix
		return true;
	}
});*/
	
	var $datepicker = $(".app-scroll-picker.date input");
	$datepicker.mobiscroll().date({
    	display:"inline",
    	dateFormat:"yy-mm-dd",
    	dateOrder:"yymmdd",
    	yearSuffix:"年",
    	monthSuffix:"月",
    	daySuffix:"日",
    	minDate:new Date(),
    	onShow:function(){
    		$(".app-scroll-picker .dw-i div").remove();
    	}
    });
    
    $(".datepicker").on("focus",function(){
    	//$datepicker.mobiscroll("setVal",new Date());
    	$(".app-scroll-picker").addClass("am-hide");
    	$(".app-scroll-picker.date").removeClass("am-hide");
    	var target = $(this).attr("name");
    	$(".app-scroll-picker.date .dp-btn").data("target-name",target);
    });
    
    $(".app-scroll-picker.date .dp-btn").on("click",function(){
    	var val = $datepicker.val();
    	var target = $(this).data("target-name");
    	$(".datepicker:input[name='"+target+"']").val(val);
    	$(".app-scroll-picker").addClass("am-hide");
    });
    
    var $projectpicker = $("#projectpicker");
    
    $projectpicker.mobiscroll().treelist({
        display: "inline",
        showInput:false,
    	onShow:function(){
    		$(".app-scroll-picker .dw-i div").remove();
    	}
    });
    
    $(".projectpicker").on("focus",function(){
    	$datepicker.mobiscroll("setVal",new Date());
    	$(".app-scroll-picker").addClass("am-hide");
    	$(".app-scroll-picker.project").removeClass("am-hide");
    });
    
    $(".app-scroll-picker.project .dp-btn").on("click",function(){
    	var val = $projectpicker.mobiscroll("getVal",true);
    	var text = $(".app-scroll-picker.project .dwcc .dw-sel:eq(1)").text();
    	$(".projectpicker").val(text);
    	$(".app-scroll-picker.project").addClass("am-hide");
    	$("#suggestNextItem").val(val.split(" ")[1]);
    });
    
    var $datepickerBirth = $(".datepicker-modal");
	$datepickerBirth.mobiscroll().date({
    	display:"inline",
    	dateFormat:"yy-mm-dd",
    	dateOrder:"yymmdd",
    	startYear:1970,
    	yearSuffix:"年",
    	monthSuffix:"月",
    	daySuffix:"日",
    	display:"modal",
    	lang:"zh",
    	onShow:function(){
    		$(".dw-bf .dw-i div").remove();
    	}
    });

	$("#sub-btn").on("click", function() {
		var regPhone = /^\d{11}$/;
		var phone = $("#phoneNo").val();
        if (!phone) {
            Comm.msg("请输入手机号码");
            return;
        }
        if (phone && (!regPhone.test(phone) || phone.length != 11)) {
        	Comm.msg("手机号码输入错误");
            return;
        }
        var $btn = $(this);
		$btn.attr("disabled","disabled").text("正在提交...");
		$.ajax({
			type : 'POST',
            url: "${ctx}/weixin/employee/saveVipInfo",
            dataType: "json",
            data:$('#subForm').serialize(),
            success: function (data) {
            	Comm.msg(data.msg);
                if (data.success) {
                	setTimeout(function() {
                		$btn.prop("disabled",false).text("提交");
						window.location.href="${ctx}/weixin/employee/billing";
					}, 2000);
                }
            },
            error: function () {
            	Comm.msg("保存失败，请重试");
            	$btn.prop("disabled",false).text("提交");
            }
        });
	});
</script>
</head>
<body>
	<form class="am-form am-form-horizontal" id="subForm">
	<input id="vipId" name="vip.vipId" type="hidden" value="${vip.vipId}"></input>
	<input id="orderInfoId" name="hairdoRecord.orderInfoId" type="hidden" value="${orderInfoId}"></input>
		<div class="am-panel-group am-margin-0" id="base_info">
			<div class="am-panel am-panel-landiao collapse">
				<div class="am-panel-hd">
					<h4 class="am-panel-title am-text-left" data-am-collapse="{parent: 'base_info', target: '#base_info_col'}">完善会员信息<span class="am-fr am-icon-angle-down am-text-white"></span></h4>
				</div>
				<div id="base_info_col" class="am-panel-collapse am-collapse am-in">
					<div class="am-g am-padding-vertical-sm">
						<div class="am-u-sm-5 am-text-center">
							<div class="am-form-group am-form-file">
								<!--<form action="management/file" method="post" enctype="multipart/form-data">-->
									<img src="${vip.photo}" onerror="this.src='assets/img/icon-rect-plus.png'" style="width:100%;height:auto" class="am-btn am-padding-0 upImage">
									<input name="vip.photo" type="hidden" value="${vip.photo}"></input>
									<!--<input type="file" name="imageFile" class="upImage" accept="image/*">-->
								<!-- </form>-->
							</div>
						</div>
						<div class="am-u-sm-7">
							<div class="am-form-group am-margin-bottom-xs">
								<div class="am-u-sm-12"><input type="text" name="vip.name" class="am-input-xs am-input-underline" placeholder="姓名" value="${vip.name}"></div>
							</div>
							<div class="am-form-group am-margin-bottom-xs">
								<div class="am-u-sm-12 am-input-xs">
									<label class="am-radio-inline am-padding-left-0">性别</label>
									<label class="am-radio-inline"><input type="radio" name="vip.sex" value="M" data-am-ucheck <c:if test="${vip.sex eq 'M'}">checked="checked"</c:if>> 男</label>
									<label class="am-radio-inline"><input type="radio" name="vip.sex" value="F" data-am-ucheck <c:if test="${vip.sex eq 'F'}">checked="checked"</c:if>> 女</label>
								</div>
							</div>
							<div class="am-form-group am-margin-bottom-xs">
								<div class="am-u-sm-12"><input type="text" name="vip.birthday" value="${birthday}" class="am-input-xs am-input-underline datepicker-modal" placeholder="生日"></div>
							</div>
							<div class="am-form-group am-margin-bottom-0">
								<div class="am-u-sm-12"><input type="text" id="phoneNo" name="vip.phoneNo" value='${vip.phoneNo}' class="am-input-xs am-input-underline" placeholder="手机号码"></div>
							</div>
						</div>
					</div>
					<h4 class="app-title-secondary">发质</h4>
					<ul class="am-list am-list-static am-padding-left-sm am-margin-0">
						<li>
							<label class="am-text-sm">自然状况：</label>
							<c:forEach items="${dictMap.HAIR_NATURE_STATE}" var="s">
								<label class="am-radio-inline"><input type="radio" name="vip.hairNatureState" value="${s.val1}" data-am-ucheck <c:if test="${s.val1==vip.hairNatureState}">checked="checked"</c:if>> ${s.val1Desc}</label>
							</c:forEach>
						</li>
						<li>
							<label class="am-text-sm">健康状况：</label>
							<c:forEach items="${dictMap.HAIR_HEALTH_STATE}" var="s">
								<label class="am-radio-inline"><input type="radio" name="vip.hairHealthState" value="${s.val1}" data-am-ucheck <c:if test="${s.val1==vip.hairHealthState}">checked="checked"</c:if>> ${s.val1Desc}</label>
							</c:forEach>
						</li>
						<li>
							<label class="am-text-sm">${hair.mdseCategoryName}：</label>
							<select id="suggestMdses1" name="hairMdse" data-am-selected="{btnWidth:'200px',btnSize:'xs'}">
								<option value="">请选择商品</option>
								<c:forEach items="${mdses}" var="m">
								<c:if test="${m.category==hair.mdseCategory}">
								<option value="${m.mdseId}">${m.name}</option>
								</c:if>
							</c:forEach>
							</select>
						</li>
					</ul>
					<h4 class="app-title-secondary">头皮</h4>
					<ul class="am-list am-list-static am-padding-left-sm am-margin-0">
						<li>
							<label class="am-text-sm">性质：</label>
							<c:forEach items="${dictMap.SCALP_STATE}" var="s">
								<label class="am-radio-inline"><input type="radio" name="vip.scalpState" value="${s.val1}" data-am-ucheck <c:if test="${s.val1==vip.scalpState}">checked="checked"</c:if>> ${s.val1Desc}</label>
							</c:forEach>
						</li>
						<li>
							<ul class="am-avg-sm-2 am-text-sm">
								<li>头屑：
								<c:forEach items="${dictMap.SCURF_STATE}" var="s">
								<label class="am-radio-inline"><input type="radio" name="vip.scurfState" value="${s.val1}" data-am-ucheck <c:if test="${s.val1==vip.scurfState}">checked="checked"</c:if>> ${s.val1Desc}</label>
								</c:forEach>
								</li>
								<li>炎症：
								<c:forEach items="${dictMap.SCALP_INFLAMMATION_STATE}" var="s">
								<label class="am-radio-inline"><input type="radio" name="vip.scalpInflammationState" value="${s.val1}" data-am-ucheck <c:if test="${s.val1==vip.scalpInflammationState}">checked="checked"</c:if>> ${s.val1Desc}</label>
								</c:forEach>
								</li>
							</ul>
						</li>
						<li>
							<label class="am-text-sm">${scalp.mdseCategoryName}：</label>
							<select id="suggestMdses2" name="scalpMdse" data-am-selected="{btnWidth:'200px',btnSize:'xs'}">
								<option value="">请选择商品</option>
								<c:forEach items="${mdses}" var="m">
								<c:if test="${m.category==scalp.mdseCategory}">
								<option value="${m.mdseId}">${m.name}</option>
								</c:if>
							</c:forEach>
							</select>
							
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="am-panel-group am-margin-0" id="service_info">
			<div class="am-panel am-panel-landiao collapse">
				<div class="am-panel-hd">
					<h4 class="am-panel-title am-text-left" data-am-collapse="{parent: '#service_info', target: '#service_info_col'}">本次服务说明<span class="am-fr am-icon-angle-down am-text-white"></span></h4>
				</div>
				<div id="service_info_col" class="am-panel-collapse am-collapse am-in">
					<div class="am-panel-bd">
						<div class="am-panel am-panel-default am-text-sm">
							<textarea name="hairdoRecord.operExplain" class="app-full-width am-border-0" rows="3" placeholder="请输入服务说明"></textarea>
						</div>
						<ul class="am-avg-sm-3 am-thumbnails am-margin-top">
							<!-- <li><img class="am-thumbnail" src="assets/img/pic1.png" /></li>-->
							<li>
								<div class="am-form-group am-form-file">
									<img src="assets/img/icon-rect-plus.png" style="width:100%;height:auto" class="am-btn am-padding-0 upImage">
									<input name="hairdoRecord.imgList[0].img" type="hidden"></input>
									<!--<input type="file" name="imageFile" class="upImage" accept="image/*">-->
								</div>
							</li>
							<li>
								<div class="am-form-group am-form-file">
									<img src="assets/img/icon-rect-plus.png" style="width:100%;height:auto" class="am-btn am-padding-0 upImage">
									<input name="hairdoRecord.imgList[1].img" type="hidden"></input>
									<!--<input type="file" name="imageFile" class="upImage" accept="image/*">-->
								</div>
							</li>
							<li>
								<div class="am-form-group am-form-file">
									<img src="assets/img/icon-rect-plus.png" style="width:100%;height:auto" class="am-btn am-padding-0 upImage">
									<input name="hairdoRecord.imgList[2].img" type="hidden"></input>
									<!-- <input type="file" name="imageFile" class="upImage" accept="image/*">-->
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="am-panel-group am-margin-0" id="next_time_info">
			<div class="am-panel am-panel-landiao collapse">
				<div class="am-panel-hd">
					<h4 class="am-panel-title am-text-left" data-am-collapse="{parent: '#next_time_info', target: '#next_time_info_col'}">建议下次美发时间<span class="am-fr am-icon-angle-down am-text-white"></span></h4>
				</div>
				<div id="next_time_info_col" class="am-panel-collapse am-collapse am-in">
					<div class="am-panel-bd">
						<div class="am-form-group">
							<label class="am-u-sm-4 am-form-label am-text-sm">下次美发时间</label>
							<div class="am-u-sm-8"><input name="hairdoRecord.suggestNextHaircutDate" type="text" class="datepicker" readonly></div>
						</div>
						<div class="app-scroll-picker date am-hide">
							<div class="am-text-right">
								<a href="javascript:void(0)" class="am-text-black am-padding-sm dp-btn">完成</a>
							</div>
							<div class="am-text-center"><input type="hidden" /></div>
						</div>
						<div class="am-form-group">
							<label class="am-u-sm-4 am-form-label am-text-sm">下次美发项目</label>
							<div class="am-u-sm-8">
								<input type="text" class="projectpicker" readonly>
								<input type="hidden" id="suggestNextItem" name="hairdoRecord.suggestNextItem">
							</div>
						</div>
						<div class="app-scroll-picker project am-text-center am-hide">
							<div class="am-text-right">
								<a href="javascript:void(0)" class="am-text-black am-padding-sm dp-btn">完成</a>
							</div>
							<div class="am-text-center">
								<ul id="projectpicker">
									<c:forEach items="${serviceMap}" var="entry" varStatus="s">
									<li data-val="${s.count}">${entry.key}
										<ul>
											<c:forEach items="${entry.value}" var="p" varStatus="status">
												<li data-val="${p.serviceItemName}">${p.serviceItemName}</li>
											</c:forEach>
										</ul>
									</li>
									</c:forEach>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="am-form-group am-margin-top-xl">
			<div class="am-u-sm-12 am-text-center">
				<button id="sub-btn" class="am-btn am-btn-landiao am-radius am-padding-horizontal-lg" type="button">提交</button>
			</div>
		</div>
	</form>
</body>
</html>
